<template>
  <div class="starting">
    <header>
      <li @click="goback()">
        <van-icon name="arrow-left" />
      </li>
      <li>开团</li>
      <li>
        <van-icon name="ellipsis" />
      </li>
    </header>
    <main>
      <div class="main">
        <img :src="info.img1" alt />
        <div class="main_one">
          <h3>{{info.plot}}</h3>
          <p>{{info.site}}</p>
          <p>
            <span>互动时间:{{info.time}}</span>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;
            <span>已报名</span>
          </p>
          <h4>团购介绍</h4>
          <p>{{info.word}}</p>
          <h4>集合地址</h4>
          <input type="text" name id placeholder="输入集合地址" />
          <h4>车辆牌号</h4>
          <input type="text" name id placeholder="请输入车辆牌号" />
          <h4>集合时间</h4>
          <input type="text" name id placeholder="先选择集合时间" />
        </div>
        <button>开团</button>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      info: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/detail",
        method: "post",
        data: { id: this.id }
      }).then(res => {
        this.info = res.data.data;
      });
    },
    goback(){
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.starting {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 80px;
  background: #1180f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  font-size: 20px;
  color: #ffffff;
}
main {
  flex: 1;
  overflow-y: auto;
}
.main img {
  width: 95%;
  height: 250px;
  margin-left: 10px;
  margin-top: 10px;
}
h3{
  font-weight: bold;
  font-size: 20px;
}
h4{
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}
.main_one{
  margin-top: 10px;
  margin: 10px;
}
.main_one input{
  width: 98%;
  height: 40px;
}
.main button{
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #ffffff;
  background: cadetblue;
  border: none;
  font-size: 22px;
  margin-top: 20px;
}
</style>